import { defineComponent, watch, shallowReactive, onMounted } from 'vue'

const PropsType = {
	cdata: {
		type: Array,
		required: true,
		default: () => [] //添加默认值，增强健壮性
	}
} as const

export default defineComponent({
	props: PropsType,
	setup(props) {
		// 配置项：初始值设为完整结构，避免 undefined
		let options = shallowReactive({
			showLegendSymbol: true,
			tooltip: null,
			geo: null,
			series: null
		})

		// 城市经纬度配置
		const geoCoordMap = {
			石家庄市: [114.52153190157445, 38.0483119268727],
			唐山市: [118.18645947203979, 39.63658372414733],
			秦皇岛市: [119.5259671942601, 39.89472719832739],
			邯郸市: [114.5456282282352, 36.631262731204046],
			邢台市: [114.51146225612979, 37.07668595096609],
			保定市: [115.47146383768579, 38.87998776845534],
			张家口市:[114.89257223145165, 40.7732372026915],
			承德市: [117.9283, 40.9702], //位置偏西南，进行了修改
			沧州市: [116.84558075595014, 38.310215141107044],
			廊坊市: [116.69058173342549, 39.54336666275853],
			衡水市: [115.6754061376161, 37.745191408077424]
		}

		// 散点数据
		const seriesData = props.cdata

		// 经纬度转换函数
		const convertData = (data: any[]) => {
			const scatterData: any[] = []
			for (const item of data) {
				const geoCoord = geoCoordMap[item.name]
				if (geoCoord) {
					scatterData.push({
						name: item.name,
						value: geoCoord.concat(item.value || 0) // 兼容无 value 场景
					})
				}
			}
			return scatterData
		}

		// 生成 options 函数
		const generateOptions = (val: any[]) => {
			Object.assign(options, {
				showLegendSymbol: true,
				tooltip: {
					trigger: 'item',
					textStyle: { fontSize: 14, lineHeight: 22 },
					position: (point: [number, number]) => [point[0] + 50, point[1] - 20],
					formatter: (params: any) => {
						// params 包含当前悬停数据的所有信息
						const cityName = params.name
						let businessValue = params.value
						if (params.seriesType === 'effectScatter') {
							// 点系列：value是 [经度, 纬度, 数值]
							businessValue = businessValue[2]
						} else if (params.seriesType === 'map') {
							// 区域系列：value是单个数值
							businessValue = businessValue
						}
						return `
          <div style="text-align: left;">
            <div>${cityName}</div>
            <div>相关指数：${businessValue}</div>
          </div>
        `
					}
				},
				geo: {
					show: true,
					aspectScale: 0.85,
					zoom: 1.16,
					top: '10%',
					left: '17%',
					map: '河北',
					roam: false,
					itemStyle: {
						borderColor: '#7ad5ff7f',
						shadowOffsetY: 5,
						shadowBlur: 15,
						areaColor: 'rgba(5,21,35,0.1)'
					}
				},
				series: [
					{
						name: '相关指数',
						type: 'map',
						aspectScale: 0.85,
						zoom: 1.16,
						map: '河北',
						top: '10%',
						left: '17%',
						itemStyle: {
							areaColor: {
								type: 'linear-gradient',
								x: 0,
								y: 300,
								x2: 0,
								y2: 0,
								colorStops: [
									{ offset: 0, color: 'RGBA(19,96,187,1)' },
									{ offset: 1, color: 'RGBA(7,193,223,1)' }
								],
								global: true
							},
							borderColor: '#4ECEE6',
							borderWidth: 1
						},
						emphasis: {
							// 修正旧语法：从 itemStyle 中提取
							areaColor: '#4f7fff',
							borderColor: 'rgba(0,242,252,.6)',
							borderWidth: 2,
							shadowBlur: 10,
							shadowColor: '#00f2fc'
						},
						label: {
							formatter: (params: any) => params.name,
							show: true,
							position: 'insideRight',
							textStyle: { fontSize: 14, color: '#efefef' },
							emphasis: { textStyle: { color: '#fff' } }
						},
						data: val
					},
					{
						type: 'effectScatter',
						coordinateSystem: 'geo',
						symbolSize: 7,
						effectType: 'ripple',
						legendHoverLink: false,
						showEffectOn: 'render',
						rippleEffect: { period: 4, scale: 2.5, brushType: 'stroke' },
						zlevel: 1,
						itemStyle: { color: '#99FBFE', shadowBlur: 5, shadowColor: '#fff' },
						data: convertData(seriesData)
					}
				]
			})
		}

		watch(
			() => props.cdata,
			(val) => generateOptions(val),
			{ deep: true, immediate: true }
		)

		// 3. 延迟生成首次 options：确保 <echart> 实例已创建
		onMounted(() => {
			setTimeout(() => {
				generateOptions(props.cdata)
			}, 0) // 0ms 延迟：优先执行 <echart> 的 onMounted
		})

		return () => {
			const height = '360px'
			const width = '330px'
			return (
				<div>
					<echart options={options} height={height} width={width} />
				</div>
			)
		}
	}
})
